
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>房地产管理平台</title>
    <base href="http://localhost:8080/myEstateProject_war/">
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/lent.css"/>
    <script type="text/javascript" src="js/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script src="js/lent.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="wrap_black"></div>
<div id="cc" class="easyui-layout" data-options="fit:true"><!-- 布局 -->
    <div data-options="region:'north'" style="height:60px;" class="northBar">
        <div class="title"><p>房地产管理系统</p></div>
        <input id="ss" id="researchFrame"><!-- 搜索框 -->
        <div id="headimg">
            <a href="javascript:void(0)" id="mb"><img src="img/me.jpg" ><div id="getUserName">请登录</div></a><!-- 菜单按钮 -->
            <div id="mm">

                <div data-options="iconCls:'icon-remove'" id="btn-outout" onclick="loginOutUserAjax()">注销</div>
            </div>
        </div>
    </div>
    <div data-options="region:'west'" style="width:300px;">
        <div id="sm" style="width:298px"></div><!-- 侧栏菜单 -->
        <ul id="tt"></ul><!-- 树 -->
        <!-- <a id="btn-out" href="#" class="easyui-linkbutton c8"></a> -->
    </div>
    <div data-options="region:'center'" style="padding:0px;background:#eee;">
        <div id="p" style="padding:10px; height: 900px; " ><!-- 面板 -->
            <table id="dg" style=" width: 98%; height: 900px;">
                <thead>
                <tr>
                    <th data-options="field:'id',width:80">主键</th>
                    <th data-options="field:'img',width:400" formatter="formatActionImg">img</th>
                    <th data-options="field:'title',width:100">标题</th>
                    <th data-options="field:'price',width:100">价格 </th>
                    <th data-options="field:'typeHouse_area',width:100">性质与面积</th>
                    <th data-options="field:'advantages',width:100">优点标签</th>
                    <th data-options="field:'operate_person',width:80,align:'left'">操作人</th>
                    <th data-options="field:'insert_time',width:200,align:'left'">录入时间</th>
                    <th data-options="field:'if_need_show',width:100">是否想要显示</th>
                    <th data-options="field:'action',width:100,align:'center'" formatter="formatAction">操作</th>
                </tr>
                </thead>

            </table><!-- 数据网格 -->

            <div id="ppContainer">
                <div id="pp" style="background:#efefef;">

                </div>
                <!-- 分页 -->
                <div id="btn-data">
                    <p style="color: red">查看具体内容请双击此列</p>
                    <div id="btn-search" class="easyui-linkbutton">刷新查询</div>
                    <div id="btn-add" class="easyui-linkbutton c4" onclick="$('#dialogAdd').dialog('open')"></div>

                </div>
                <!-- 添加数据 -->
                <div id="addData" style="margin-top: 10px">


                </div>

            </div>









            <!--更新数据的弹窗 dialogUpdate-->
            <div id="dialogUpdate" class="easyui-dialog" title="更新房源" data-options="iconCls:'icon-add'"
                 style="width: 800px;height: 400px; display: flex;justify-content: center; flex-direction: column;align-items: center"

            >
                <form   enctype="multipart/form-data"
                        id="updateForm"
                        method="post">
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;标题: <input type="text" id="title1" style="margin-left:56px;" ></div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;上传的图片 : <input  type="file" name="imgAddress" style="margin-left:12px;"></div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;性质与面积 : <input type="text" id="typeHouse_area1" style="margin-left:13px;"></div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;优点标签 : <input type="text" id="advantages1" style="margin-left:27px;" ></div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;是否显示 : <input type="text" id="if_need_show1" style="margin-left:27px;"></div>
                    <div style=" margin-left: 16px">操作人: <input type="text" id="operate_person1" style="margin-left:46px;"></div>
                    <input  type="button" onclick="updateAjaxFrom()" value="更新" style="margin-left:45%; margin-top:20px;" />
                </form>





            </div>
            <!--添加数据的弹窗-->
            <div id="dialogAdd" class="easyui-dialog" title="添加房源" data-options="iconCls:'icon-add'"
                 style="width: 800px;height: 400px; display: flex;justify-content: center; flex-direction: column;align-items: center"

            >
                <form   enctype="multipart/form-data"
                        id="addForm"
                        method="post">
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;标题: <input type="text" id="title" style="margin-left:56px;" ></div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;上传的图片 : <input  type="file" name="imgAddress" style="margin-left:12px;"></div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;性质与面积 : <input type="text" id="typeHouse_area" style="margin-left:13px;"></div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;优点标签 : <input type="text" id="advantages" style="margin-left:27px;" ></div>
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;是否显示 : <input type="text" id="if_need_show" style="margin-left:27px;"></div>
                    <div style=" margin-left: 16px">操作人: <input type="text" id="operate_person" style="margin-left:46px;"></div>
                    <input  type="button" onclick="addAjaxFrom()" value="添加" style="margin-left:45%; margin-top:20px;" />
                </form>





            </div>
            <!--删除数据的弹窗-->
            <div id="dialogDel" class="easyui-dialog" title="添加房源" data-options="iconCls:'icon-delete'"
                 style="width: 400px;height: 200px; display: flex;justify-content: center; flex-direction: column;align-items: center" >
                <!--                删除的id是-->
                <div>&nbsp;&nbsp;&nbsp;&nbsp;删除的编号是: <input type="text" id="deleId" ></div>
                <!--                删除的按钮-->
                <div id="del_btn"  style="margin-top: 30px; display: flex;justify-content: center;align-items: center">
                    <button style="" onclick="delData()" >确定</button>
                    <button style="margin-left: 20px; " onclick="$('#dialogDel').dialog('close')" >取消</button>
                </div>



            </div>

        </div>
    </div>
</div>
</body>
<script>
    document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.

    function subSomething()
    {
        switch (document.readyState) {
            case "loading":
                //
                console.log("表示文档还在加载中，即处于“正在加载”状态。")

                $(".wrap_black").css({"position":"absolute","z-index":"999999"});
                break;
            case "interactive":
                // 文档已经结束了“正在加载”状态，DOM元素可以被访问。
                // 但是像图像，样式表和框架等资源依然还在加载。
                console.log("但是像图像，样式表和框架等资源依然还在加载。")

                $(".wrap_black").css({"position":"absolute","z-index":"999999","background-color":"white"});

                break;
            case "complete":
                console.log("页面所有内容都已被完全加载.")
                $(".wrap_black").css({"z-index":"-1"});


                break;
        }
    }
    var data1=[];
    $(function(){

        var upDateRowid;//得到要更新的id
        lentData();
        //页面刚加载时就关闭添加的弹窗功能
        $('#dialogAdd').dialog('close');
        $('#dialogDel').dialog('close');
        $('#dialogUpdate').dialog('close');
        //模拟点击,使按钮停留在点击的状态
        $('#_easyui_tree_2').click();
        //当网格被点击的事件,发起ajax跳转到内容页面
        $('#dg').datagrid({
            onDblClickRow(index,rowData){

                var id=rowData.id;
                console.log(id)



            }
        });
        // 分页
        $('#pp').pagination({
            total:100,
            pageSize:20
        });
        //刷新页面数据
        $("#btn-search").click(
            function () {
                lentData();
                //自动设置页码为第一页
                $('#pp').pagination({
                    pageNumber:1
                })

            }
        );
        //得到用户名的ajax,页面启动自动调用
        getUserNameAjax();





    })


    //注销用户的ajax
    function loginOutUserAjax(){
        $.ajax({

            method:'post',
            url:'http://localhost:8080/myEstateProject_war/buy/loginOutUser.do',
            success:(res)=>{
                //设置用户名
                if (res.success){
                    alert("注销成功")
                    window.location.href="http://localhost:8080/myEstateProject_war/";
                }

            }
        })


    }
    //得到用户名的ajax,页面启动自动调用
    function getUserNameAjax(){
        $.ajax({

            method:'post',
            url:'http://localhost:8080/myEstateProject_war/buy/getUserName.do',
            success:(res)=>{
                //设置用户名
                $("#getUserName").text(res.message)

            }
        })


    }
    // 搜索框点击
    $('#ss').searchbox({
        searcher:function(value){

            findLentAllPagesNumDataAjax(value);


        },
        width: 400,
        height: 40,
        prompt:'请输入标题'
    });
    //更新数据
    function UpdateData(){
        var id=$("#deleId1").val();
        var title=$("#title1").val();
        var operate_person=$("#operate_person1").val();
        //确认输入是否为空
        if (id==null){
            alert("编号为空")
            return;
        }
        //确认输入是否是数字
        if (isNumber(id)==false){
            alert("编号请输入数字")
            return;
        }
        // 弹窗确定是否要删除数据
        if (confirm("是否真的要更新编号为"+id+"的数据?")){
            UpdateDataAjax(id,title,operate_person);
        }




    }


    //搜索数据
    function  findLentDataAjax(part,pageNum){
        $.ajax({

            method:'post',
            url:'http://localhost:8080/myEstateProject_war/lent/partLent.do?part='+part+"&pageNum="+pageNum,
            success:(res)=>{
                res.insert_time=formatDate(res.insert_time);
                for(var i=0;i<res.length;i++){
                    var date=new Date(res[i].insert_time);
                    //转换一下日期格式
                    var time=formatDate(date);
                    res[i].insert_time=time;


                }
                data1=res;



                $('#dg').datagrid({
                    data:data1
                });



            }





        })


    }
    //搜索数据的总页数(模糊查询)
    function findLentAllPagesNumDataAjax(value){
        $.ajax({

            method:'post',
            url:'http://localhost:8080/myEstateProject_war/lent/allPageSelectWhenSearch.do?value='+value,
            success:(res)=>{
                //返回总页数
                // 分页
                // 第一次点击返回第一页数据
                findLentDataAjax(value,1);
                $('#pp').pagination({
                    total:res,
                    pageSize:20,
                    //设置模糊查询 分页时的页数
                    onSelectPage:function(pageNumber, pageSize){

                        findLentDataAjax(value,pageNumber);
                    }
                });

            }
        })


    }
    //数据网格扩展编辑器
    //_______________________________________________________________________
    // function formatAction(value,row,index){
    //     var edit = '<a href="javascript:void(0)" onclick="edit(this)">编辑</a> ';
    //     var deleterow = '<a href="javascript:void(0)" onclick="deleterow(this)">删除</a>';
    //     // console.log(row);
    //     // console.log(value);
    //     // console.log(index);
    //     // console.log(this);
    //     // printObject(this);
    //     return edit+deleterow;
    // }
    //回显图片
    function formatActionImg(value,row,index) {

        var fileName1=row.imgAddress;
        console.log(fileName1)
        // 将json字符串转化为json对象

        if (fileName1!=null){
            var fileNameObj=JSON.parse(fileName1);
            var fileName=fileNameObj.fileName[0].toString();
            console.log(fileName)

            return "<div class='dataImgBox'><img src='http://localhost:8080/myEstateProject_war/upload/"+fileName+"'></img><div> ";
        }else {
            return "<div class='dataImgBox'><img src='http://localhost:8080/myEstateProject_war/img/noPic.png'+></img><div> ";
        }




    }
    function formatAction(val, row) {
        return "<a href='javascript:edit(" + row.id + ")' style='color:blue;'>编辑</a> "
            +"<a href='javascript:deleterow(" + row.id + ")' style='color:blue;'>删除</a> "
            +"<a href='javascript:openDialog(" + row.id + ")' style='color:blue;'>更新</a>";

    }
    //遍历对象
    // function printObject(obj){
    //     var temp = "";
    //     for(var i in obj){//用javascript的for/in循环遍历对象的属性
    //         temp += i+":"+obj[i]+"\n";
    //     }
    //     console.log(temp);//结果：cid:C0 \n ctext:区县
    // }

    //获取行ID（为当前表格显示的行数id，不是数据库中的id）
    // function getRowIndex(target){
    //     var tr = $(target).closest('tr.datagrid-row');
    //     // console.log(target);
    //     // printObject(target);
    //     return parseInt(tr.attr('datagrid-row-index'));
    // }
    function edit(dataId){
        //点击时精确定位到当前行
        //$("#data-form").datagrid("selectRow",target);
        //获取当前行的数据
        //var row=$("#data-form").datagrid("getSelected");
        console.log(rowid);
        // console.log("编辑");
        // console.log(getRowIndex(target));
    }
    function deleterow(dataId){
        $.messager.confirm('确认','确认删除?',function(r){
            if (r){
                delDataAjax(dataId);
            }
        });
    }
    //打开更新的对话框
    function openDialog(dataId){
        $('#dialogUpdate').dialog('open');
        upDateRowid=dataId;
        console.log(upDateRowid);


        //console.log(rowid);
    }
    <!-- --------测试更新根据id来修改 start-------
         修改日期:2021/12/14
         修改人: 江
         修改描述:增加更新功能


      -->
    // 添加的ajax
    function addAjaxFrom(){
        let title1=$('#title').val();
        let typeHouse_area1=$('#typeHouse_area').val();
        let advantages1=$('#advantages').val();
        let if_need_show1=$('#if_need_show').val();
        let operate_person1=$('#operate_person').val();
        //!!注意 upDateRowid在前面打开窗口已经完成赋值
        console.log(title)
        var options = {
            type: 'post',
            url: 'http://localhost:8080/myEstateProject_war/lent/addLent.do?'+"title="+title1+"&typeHouse_area="+typeHouse_area1+
                "&advantages="+advantages1+"&if_need_show="+if_need_show1+"&operate_person="+operate_person1,
            success: function(res) {
                alert(res.message);
            },
            error: function(err) {
                alert("发生异常,请联系开发人员");
            }
        };

        $('#addForm').ajaxSubmit(options);



    }

    function updateAjaxFrom(){
        let title1=$('#title1').val();
        let typeHouse_area1=$('#typeHouse_area1').val();
        let advantages1=$('#advantages1').val();
        let if_need_show1=$('#if_need_show1').val();
        let operate_person1=$('#operate_person1').val();
        //!!注意 upDateRowid在前面打开窗口已经完成赋值
        console.log(title)
        var options = {
            type: 'post',
            url: 'http://localhost:8080/myEstateProject_war/lent/updateLent.do?'+"updateId="+upDateRowid+"&title="+title1+"&typeHouse_area="+typeHouse_area1+
                "&advantages="+advantages1+"&if_need_show="+if_need_show1+"&operate_person="+operate_person1,
            success: function(res) {
                alert(res.message);
            },
            error: function(err) {
                alert("发生异常,请联系开发人员");
            }
        };
        console.log(upDateRowid)
        $('#updateForm').ajaxSubmit(options);



    }
    <!-- --------测试更新end------- -->

    //_______________________________________________________________________
    //删除数据
    function delData(){
        var deleId=$("#deleId").val();
        //确认输入是否为空
        if (deleId==null){
            alert("输入框为空")
            return;
        }
        //确认输入是否是数字
        if (isNumber(deleId)==false){
            alert("请输入数字")
            return;
        }
        // 弹窗确定是否要删除数据
        if (confirm("是否真的要删除编号为"+deleId+"的数据?")){
            delDataAjax(deleId);
        }






    }

    // 添加数据
    function addSubmitData(form){

        console.log(form.action)



    }

    //获取总页数
    function getAllPagesSelect(){
        $.ajax({

            method:'post',
            url:'http://localhost:8080/myEstateProject_war/lent/allPageSelect.do',
            success:(res)=>{

                // 分页
                $('#pp').pagination({
                    total:res,
                    pageSize:20,
                    onSelectPage:function(pageNumber, pageSize){
                        lentDataWhenChange(pageNumber);
                    }
                });

            }





        })



    }

    //获取总页数
    function getAllPages(){
        $.ajax({

            method:'post',
            url:'http://localhost:8080/myEstateProject_war/lent/allPage.do',
            success:(res)=>{

                // 分页
                $('#pp').pagination({
                    total:res,
                    pageSize:20,
                    onSelectPage:function(pageNumber, pageSize){
                        lentDataWhenChange(pageNumber);
                    }
                });

            }





        })



    }
    //查询得到买房表的数据(当改变页数时)
    /*
    * pageNum:代表第几页
    *
    * */
    function lentDataWhenChange(pageNum){
        //默认发送第一页
        $.ajax({
            method:'post',
            url:'http://localhost:8080/myEstateProject_war/lent/lentPage.do?pageNum='+pageNum,
            success:(res)=>{
                res.insert_time=formatDate(res.insert_time);
                for(var i=0;i<res.length;i++){
                    var date=new Date(res[i].insert_time);
                    //转换一下日期格式
                    var time=formatDate(date);
                    res[i].insert_time=time;


                }
                data1=res;


                $('#dg').datagrid({
                    data:data1
                });
                //得到总页数
                getAllPages();
            }
        });

    }
    //查询得到买房表的数据
    function lentData(){
        //默认发送第一页
        $.ajax({
            method:'post',
            url:'http://localhost:8080/myEstateProject_war/lent/lentPage.do?pageNum=1',
            success:(res)=>{
                res.insert_time=formatDate(res.insert_time);
                for(var i=0;i<res.length;i++){
                    var date=new Date(res[i].insert_time);
                    //转换一下日期格式
                    var time=formatDate(date);
                    res[i].insert_time=time;


                }
                data1=res;


                $('#dg').datagrid({
                    data:data1
                });
                //得到总页数
                getAllPages();
            }
        });

    }
    //发起删除数据的ajax
    function delDataAjax(deleId){
        $.ajax({

            method:'post',
            url:'http://localhost:8080/myEstateProject_war/lent/lentDel.do?id='+deleId,
            success:(res)=>{
                console.log("addSuccess"+res)
                if (res==1){
                    alert("删除成功")
                }else{
                    alert("删除失败,没有此数据")
                }


            }





        })

    }
    /*
    *
    *    下面全部是工具类
    *
    * */

    //处理时间戳的函数
    function formatDate(date) {
        var date = new Date(date);
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return YY + MM + DD +" "+hh + mm + ss;
    }

    //判断是否是数字的函数
    function isNumber(val){

        var regPos = /^\d+(\.\d+)?$/; //非负浮点数
        var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
        if(regPos.test(val) || regNeg.test(val)){
            return true;
        }else{
            return false;
        }

    }



</script>
</html>